<template>
	<view>
		<tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
			<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
				<!-- 搜索框 -->
				<view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center">
					<view class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left"
						style="background-color: rgba(230,230,230,0.3);">
						<view class="custom-nav__search__icon tn-icon-search tn-color-gray"></view>
						<tn-input v-model="value" :type="type" :border="border" :height="height"
							:autoHeight="autoHeight" clearable />
					</view>
					<tn-button @click="goBack">取消</tn-button>

				</view>
			</view>
		</tn-nav-bar>
		<!-- 搜索列表 -->
		<view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<view class="tn-text-bold tn-margin">
				历史搜索
			</view>
			<view class="search-list tn-margin">

				<text
					class="justify-content-item tn-round tn-text tn-bg-gray--light tn-color-gray--dark tn-margin-right"
					v-for="(searchItem,searchIndex) in oldsearchList" :key="searchIndex" style="padding: 5rpx 15rpx;">
					{{searchItem}}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oldsearchList: ['防火', '损坏', '食堂']
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 自定义导航栏内容 start */
	.custom-nav {
		height: 100%;

		&__back {
			margin: auto 5rpx;
			font-size: 40rpx;
			margin-right: 10rpx;
			margin-left: 30rpx;
			flex-basis: 5%;
		}

		&__search {
			flex-basis: 100%;
			width: 100%;
			height: 100%;

			&__box {
				width: 100%;
				height: 70%;
				padding: 10rpx 0;
				margin: 0 30rpx;
				border-radius: 60rpx 60rpx 0 60rpx;
				font-size: 24rpx;
			}

			&__icon {
				padding-right: 10rpx;
				margin-left: 20rpx;
				font-size: 30rpx;
			}

			&__text {
				// color: #AAAAAA;
			}
		}
	}

	.logo-image {
		width: 65rpx;
		height: 65rpx;
		position: relative;
		border: 1rpx solid #F8F7F8;
		border-radius: 50%;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 50%;
	}

	/* 自定义导航栏内容 end */
</style>